﻿<html class="pixel-ratio-1">

<head>
  <title>评价列表</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <!-- <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" /> -->
  <link rel="stylesheet" href="../../../css/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" href="../../../Content/weui/weui.min.css" />
  <link rel="stylesheet" href="../../../Content/weui/weui.example.css" />
  <link rel="stylesheet" href="../../../Content/sui-mobile/css/sm.min.css" />
  <link rel="stylesheet" href="../../../Content/sui-mobile/css/sm-extend.min.css" />
  <style type="text/css">
    .infinite-scroll-preloader {
      margin-top: -20px;
    }

    .content-block {
      margin: 0.25rem 0;
      padding: 0 .25rem;
    }
  </style>
</head>

<body>
  <div class="page-group">
    <div id="page-tab" class="page">
      <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left back" href="javascript:history.go(-1);">
          <span class="icon icon-left"></span> 返回
        </a>
        <h1 class="title">全部评价</h1>
      </header>
      <div class="content">
        <div class="buttons-tab fixed-tab" data-offset="44">
          <a href="#tab1" class="tab-link active button" data-total="0" data-type="all" data-first-load="true" id="allTab">
            全部
            <span class="badge">0</span>
          </a>
          <a href="#tab2" class="tab-link button" data-total="0" data-type="good" data-first-load="true" id="goodTab">
            好评
            <span class="badge">0</span>
          </a>
          <a href="#tab3" class="tab-link button" data-total="0" data-type="medium" data-first-load="true" id="mediumTab">
            中评
            <span class="badge">0</span>
          </a>
          <a href="#tab4" class="tab-link button" data-total="0" data-type="negative" data-first-load="true" id="negativeTab">
            差评
            <span class="badge">0</span>
          </a>
        </div>
        <div class="tabs">
          <div id="tab1" class="tab active">
            <div class="content-block">
              <div class="weui_panel weui_panel_access">
                <div class="weui_panel_bd" id="allComments">
                </div>
                <a class="weui_panel_ft" id="loadMoreallComments" onclick="getList('all');" href="javascript:void(0);">更多</a>
              </div>
            </div>
          </div>
          <div id="tab2" class="tab">
            <div class="content-block">
              <div class="weui_panel weui_panel_access">
                <div class="weui_panel_bd" id="goodComments">
                </div>
                <a class="weui_panel_ft" id="loadMoregoodComments" onclick="getList('good');" href="javascript:void(0);">更多</a>
              </div>
            </div>
          </div>
          <div id="tab3" class="tab">
            <div class="content-block">
              <div class="weui_panel weui_panel_access">
                <div class="weui_panel_bd" id="mediumComments">
                </div>
                <a class="weui_panel_ft" id="loadMoremediumComments" onclick="getList('medium');" href="javascript:void(0);">更多</a>
              </div>
            </div>
          </div>
          <div id="tab4" class="tab">
            <div class="content-block">
              <div class="weui_panel weui_panel_access">
                <div class="weui_panel_bd" id="negativeComments">
                </div>
                <a class="weui_panel_ft" id="loadMorenegativeComments" onclick="getList('negative');" href="javascript:void(0);">更多</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/x-handlebars-template" id="tpl">
    <div class="weui_panel_hd">{{name}}</div>
    <div class="overall">
      <div class="star fl" data-score="{{avgScore}}"></div>
      <div class="score fl">{{avgScore}}</div>
      <div class="total fr">{{userCount}}人评价</div>
    </div>
  </script>
  <script type="text/x-handlebars-template" id="tplComment">
    {{#each this}}
    <div class="weui_media_box weui_media_text">
      <div class="weui_cell_bd weui_cell_primary">
        <span class="star-mini" data-score="{{score}}"></span>
      </div>
      <p class="weui_media_desc">{{content}}</p>
      <ul class="weui_media_info">
        <li class="weui_media_info_meta">{{userName}}</li>
        <li class="weui_media_info_meta">{{createTime}}</li>
      </ul>
    </div>
    {{/each}}
  </script>

  <script src="../../../shop/templates/cdrt/js/vue/vue.min.js"></script>
  <script src="../../../shop/templates/cdrt/js/jquery-2.0.2.min.js"></script>
  <script src="../../../shop/templates/cdrt/js/layer/layer.js"></script>
  <script src="../../../shop/templates/cdrt/js/handlebars.js"></script>
  <script src="../../../shop/templates/cdrt/js/raty/jquery.raty.min.js"></script>
  <script type="text/javascript" src="../../../Content/zepto/zepto.min.js"></script>
  <script type="text/javascript" src="../../../Content/sui-mobile/js/sm.min.js"></script>
  <script type="text/javascript" src="../../../Content/sui-mobile/js/sm-extend.min.js"></script>
  <script type="text/javascript">
    $.fn.raty.defaults.path = '../../../shop/templates/cdrt/images';
  // 加载flag
  var loading = false;
  // 最多可加载的条目
  var maxItems = 100;

  // 每次加载添加多少条目
  var itemsPerLoad = 20;

  // 上次加载的序号
  var lastIndex = 20;

  var ui = {
    productid: 0,
    pagesize : 1,
    showLoading: function(message) {
      message = message || '加载中...';
      layer.open({
        content: message
      });
    },
    alert: function(message) {
      layer.open({
        content: message,
        btn: ['确定']
      });
    },
    getQueryString: function(name) {
      var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
      if (result == null || result.length < 1) {
        return "";
      }
      return result[1];
    },
    render: function(tpl, data) {
      var source = $(tpl).html();
      //预编译模板
      var template = Handlebars.compile(source);
      //匹配json内容
      return template(data);
    }
  };

  var param = {
    page: 1,
    pageSize: 10
  };

  $(document).on("click", ".tab-link", function(e) {
    var type = $(this).attr('data-type');
    //console.log('type:' +type);
    var total = $(this).attr('data-total');
    //console.log('total:' + total);
    var firstLoad = $(this).attr('data-first-load');
    //console.log(firstLoad);
    if (firstLoad == 'true') {
      //console.log('set to false:'+$(this).attr("data-first-load"));
      getList(type);
    }
  });

  $(document).ready(function () {
    ui.productid = ui.getQueryString("productid");

    ui.currentPages = new Array();
    ui.currentPages["all"] = 1;
    ui.currentPages["good"] = 1;
    ui.currentPages["medium"] = 1;
    ui.currentPages["negative"] = 1;

    var type = "all";
    var option = {
      page: 10,
      pageSize: ui.pagesize,
      type: type,
      source: $("#allTab")[0],
      success: getList(type)
    };
    getTotal(option);
    // getTotal({
    //   success: getList
    // });
  });

  function getTotal(option) {
    var option = option || {};
    ui.showLoading();

    $.ajax({
      url: '/shop/shopmgr.ashx?myact=product_comment_total',
      type: 'get',
      dataType: 'json',
      data: {
        page: option.page,
        pageSize: option.pageSize,
        type: option.type,
        productid:ui.productid
      },
      success: function(res) {
        layer.closeAll();
        console.log(res.data);
        if (res.isSuccess) {
          var totalCount = res.data.totalCount;
          var goodCount = res.data.goodCount;
          var mediumCount = res.data.mediumCount;
          var negativeCount = res.data.negativeCount;

          $("#allTab").find(".badge").html(totalCount);
          $("#allTab").attr("data-total", totalCount);
          $("#goodTab").find(".badge").html(goodCount);
          $("#goodTab").attr("data-total", goodCount);
          $("#mediumTab").find(".badge").html(mediumCount);
          $("#mediumTab").attr("data-total", mediumCount);
          $("#negativeTab").find(".badge").html(negativeCount);
          $("#negativeTab").attr("data-total", negativeCount);

          if (totalCount) {
            option.success && option.success();
          }
        }
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest.status);
        console.log(XMLHttpRequest.readyState);
        console.log(textStatus);
      }
    });
  };

  function getList(type) {
    ui.showLoading();
    $.ajax({
      url: '/shop/shopmgr.ashx?myact=product_comment_list',
      type: 'get',
      dataType: 'json',
      data: { page: ui.currentPages[type], pageSize: ui.pagesize, type: type, productid: ui.productid },
      success: function(res) {
        //console.log(res);
        //console.log(res.data);
        layer.closeAll();
        if (res.isSuccess) {
          //ui.currentPages[type] = ui.currentPages[type] + 1;

          var targetContainer = "#" + type + "Comments";
          
          //console.log($(targetContainer).attr("data-first-load"));
          $(targetContainer).append(ui.render('#tplComment', res.data));

          var tabLinkContainer = "#" + type + "Tab";
          //console.log(tabLinkContainer);
          var commentCount = $(tabLinkContainer).attr('data-total');
          //console.log("tabLinkContainer:" + tabLinkContainer);
          $(tabLinkContainer).attr("data-first-load", "false");
          //console.log('commentCount:' + commentCount);

          var currentTypePage = ui.currentPages[type];
          //console.log("currentTypePage:" + currentTypePage);
          //console.log("totalPages:" + Math.ceil(commentCount / ui.pagesize));
          var loadMore = Math.ceil(commentCount / ui.pagesize) > currentTypePage;
          //console.log("loadMore:" + loadMore);
          var loadMoreElementId = "#loadMore" + type + "Comments";
          //console.log("loadMoreElementId:" + loadMoreElementId);
          $(loadMoreElementId).hide();
          if (loadMore && commentCount > 0) {
            //console.log("show load more");
            ui.currentPages[type]++;
            $(loadMoreElementId).show();
          }

          $(".star-mini").raty({
            width: 100,
            readOnly: true,
            starHalf: 'mini-star-half.png',
            starOff: 'mini-star-off.png',
            starOn: 'mini-star-on.png',
            score: function() {
              return $(this).attr('data-score');
            }
          });
        }
      }
    });
  }
  </script>
</body>

</html>